typescript migration

2024-02-10

I spent some time using TS (TypeScript) on project, even experienced the pains of migrating files, but I can't argue once it all leveled out I could see the usefulness of it all.

So, what is it exactly? TS adds static checker to code. Meaning, there will be a layer of protection against unwanted/unexpected things like, let id = 5, which is a number but then somewhere down the line you try to treat it as a string. A type system is gonna be like ✋ nope.

If migrating, don't forget about ESLint:

Don't forget to update your package.json lint to put attention to .ts and .tsx files.

Make sure to update your eslintrc,json as well:

Something you may want to turn on, adding "plugin:@typescript-eslint/recommended-requiring-type-checking", and then running npm lint will show you all the stuff to fix.

This can get quite overwhelming depending on amount of files you need to migrate. You definitely want this turned on post conversion to enforce the type checking.

As you start migrating, interfaces are sure to come up. "The general advice is "use interfaces unless you need type aliases"."

example (type alias): export type Animal = "dog" | "cat" | "fish" | "mouse"

type aliases allow something like a few different strings, where a interface would not.

The DOM and TS: Apparently, there's legacy pseudo types floating about that normally we wouldnt have to care for, however, implicitly calling something... eh, TS encourages to be explicit. When it comes to the DOM, we need to type values as they come out. It has no way of understanding something going in/out.

Lastly, once you have everything sorted, probaly wanna make sure you keep it that way.

  1. add typecheck: "typecheck": "tsc --noEmit". This runs the compiler without emiting any JS files, typechecking your TS files. Good thing for a build process integrated into your CI (continous integration).

  2. add format check: "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"" This checks code conforms to formatting rules agreed upon the team and then defined in prettier. When it runs it will list out violations to fix.


← go back